<!DOCTYPE html>
<html>
<head>
<title>Circuit Diagram</title>
</head>
<body>
<canvas id="circuitCanvas" width="500" height="350"></canvas>
<script>
    const canvas = document.getElementById("circuitCanvas");
    const ctx = canvas.getContext("2d");
    
    // Style
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = "black";
    ctx.font = "16px Arial";
    ctx.textAlign = "center";
    
    // Coordinates
    const y_top = 80;
    const y_bottom = 280;
    const y_switch_pivot = 140;
    const y_switch_Y = 200;

    const x_batt = 80;
    const x_R_start = 140;
    const x_R_end = 200;
    const x_switch_contact = 280;
    const x_switch_pivot = 340;
    const x_cap = 420;
    const x_S_center = x_switch_contact;

    const y_S_start = 220;
    const y_S_end = 260;

    // --- Draw Wires ---
    ctx.beginPath();
    // Top wire
    ctx.moveTo(x_batt, y_top);
    ctx.lineTo(x_R_start, y_top);
    ctx.moveTo(x_R_end, y_top);
    ctx.lineTo(x_switch_contact, y_top);
    // Bottom wire (ground)
    ctx.moveTo(x_batt, y_bottom);
    ctx.lineTo(x_cap, y_bottom);
    // Switch to Capacitor wire
    ctx.moveTo(x_switch_pivot, y_switch_pivot);
    ctx.lineTo(x_cap, y_switch_pivot);
    // Switch Y to Resistor S wire
    ctx.moveTo(x_switch_contact, y_switch_Y);
    ctx.lineTo(x_S_center, y_S_start);
    // Resistor S to ground wire
    ctx.moveTo(x_S_center, y_S_end);
    ctx.lineTo(x_S_center, y_bottom);
    ctx.stroke();

    // --- Draw Components ---
    
    // Battery
    const batt_y1 = 120;
    const batt_y2 = 240;
    ctx.beginPath();
    ctx.moveTo(x_batt - 20, batt_y1); // Positive plate (long)
    ctx.lineTo(x_batt + 20, batt_y1);
    ctx.stroke();
    ctx.beginPath();
    ctx.lineWidth = 3;
    ctx.moveTo(x_batt - 10, batt_y2); // Negative plate (short, thick)
    ctx.lineTo(x_batt + 10, batt_y2);
    ctx.stroke();
    ctx.lineWidth = 1.5; // Reset line width
    // Wires to battery
    ctx.beginPath();
    ctx.moveTo(x_batt, batt_y1); ctx.lineTo(x_batt, y_top);
    ctx.moveTo(x_batt, batt_y2); ctx.lineTo(x_batt, y_bottom);
    ctx.stroke();
    ctx.textAlign = "left";
    ctx.fillText("8.0 V", x_batt + 25, (batt_y1 + batt_y2) / 2 + 5);

    // Resistor R (rectangle)
    const resistor_h = 20;
    ctx.strokeRect(x_R_start, y_top - resistor_h/2, x_R_end - x_R_start, resistor_h);
    ctx.textAlign = "center";
    ctx.fillText("R", (x_R_start + x_R_end)/2, y_top - 20);

    // Resistor S (rectangle, vertical)
    ctx.strokeRect(x_S_center - resistor_h/2, y_S_start, resistor_h, y_S_end - y_S_start);
    ctx.textAlign = "left";
    ctx.fillText("S", x_S_center + 15, (y_S_start + y_S_end)/2 + 5);

    // Capacitor
    const cap_plate_w = 40;
    const cap_y1 = y_switch_pivot + 20;
    const cap_y2 = y_bottom - 20;
    ctx.beginPath();
    ctx.moveTo(x_cap, y_switch_pivot);
    ctx.lineTo(x_cap, cap_y1);
    ctx.moveTo(x_cap - cap_plate_w/2, cap_y1); // Top plate
    ctx.lineTo(x_cap + cap_plate_w/2, cap_y1);
    ctx.moveTo(x_cap - cap_plate_w/2, cap_y2); // Bottom plate
    ctx.lineTo(x_cap + cap_plate_w/2, cap_y2);
    ctx.moveTo(x_cap, cap_y2);
    ctx.lineTo(x_cap, y_bottom);
    ctx.stroke();

    // Switch
    // Contacts (small filled circles)
    ctx.beginPath();
    ctx.arc(x_switch_contact, y_top, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.textAlign = "right";
    ctx.fillText("X", x_switch_contact - 10, y_top + 5);
    
    ctx.beginPath();
    ctx.arc(x_switch_contact, y_switch_Y, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.fillText("Y", x_switch_contact - 10, y_switch_Y + 5);

    // Pivot (unfilled circle)
    ctx.beginPath();
    ctx.arc(x_switch_pivot, y_switch_pivot, 3, 0, 2 * Math.PI);
    ctx.stroke();

    // Arm (connecting pivot to X)
    ctx.beginPath();
    ctx.moveTo(x_switch_pivot, y_switch_pivot);
    ctx.lineTo(x_switch_contact, y_top);
    ctx.stroke();

    // Figure Label
    ctx.textAlign = "center";
    ctx.fillText("Fig. 5.2", canvas.width/2, canvas.height - 10);
</script>
</body>
</html>